Skip to main content
Version: Current

Hero - Basic - Collection

The Hero - Basic section is designed to prominently display the page title and key information at the top of a page. It can also showcase a featured image if available, providing a visually appealing introduction to the page content. This section offers various customization options, including featured image placement, text alignment, and color settings, allowing you to tailor the appearance to fit your design needs.

Key functionalities include the ability to show breadcrumbs, descriptions, print and share buttons, and control over padding and separator styles. These features help create a balanced and visually engaging layout that enhances user experience.

Practical usage examples include using the Hero - Basic section for a homepage introduction, highlighting a new product launch, or announcing an upcoming event. By effectively utilizing this section, you can draw immediate attention from visitors and provide essential information in a visually appealing manner.

Overview​

The Hero - Basic section is designed to prominently display the page title and key information at the top of a page. It can also showcase a featured image if available, providing a visually appealing introduction to the page content.

Key components and functionality​

This setting allows you to choose how the featured image is displayed within the section. Options include:

  1. Background: The image is used as a background.
  2. Left: The image is positioned on the left side.
  3. Right: The image is positioned on the right side.
  4. No image: No image is displayed.

Default: Right

Text alignment​

This setting controls the alignment of text within the section. You can choose from various alignment options to best fit your design needs.

Show breadcrumbs​

Enable this option to display a breadcrumb navigation trail, which helps users understand their location within the site's hierarchy.

Default: Enabled

Show description​

This option allows you to display a brief description or excerpt within the section, providing additional context or information.

Default: Enabled

Show print button​

This setting adds a print button to the section, allowing users to easily print the page content.

Default: Disabled

Show share button​

Enable this option to include a share button, facilitating easy sharing of the page on social media or other platforms.

Default: Enabled

Color settings​

These settings allow you to customize the color scheme of the section, including icon, text, and overlay colors. Adjusting these settings can help ensure your section aligns with your overall site design.

  1. Icon color: Customize the color of icons within the section.
  2. Text color: Set the color for text elements.
  3. Overlay color: Choose a color for the overlay, with a default of #000000.

Padding settings​

Control the spacing above and below the section content with these settings. Adjusting padding can help create a balanced and visually appealing layout.

  1. Top padding (desktop): Adjust the top padding for desktop views, with a default of 32px.
  2. Bottom padding (desktop): Adjust the bottom padding for desktop views, with a default of 32px.
  3. Top padding (mobile): Adjust the top padding for mobile views, with a default of 32px.
  4. Bottom padding (mobile): Adjust the bottom padding for mobile views, with a default of 32px.

Separator settings​

These settings allow you to add a line at the top or bottom of the section, creating a visual separation between sections.

  1. Top separator style: Choose from dashed, dotted, line, or none, with a default of none.
  2. Bottom separator style: Choose from dashed, dotted, line, or none, with a default of none.

Visibility settings​

Control when this section is shown, which can be helpful for creating custom mobile layouts.

Usage examples​

  1. Homepage Introduction: Use the Hero - Basic section at the top of your homepage to welcome visitors with a striking image and a brief introduction to your site or brand.

  2. Product Launch: Highlight a new product by placing its image and key details in this section, drawing immediate attention from visitors.

  3. Event Announcement: Announce an upcoming event with a captivating image and essential details, encouraging visitors to learn more or participate.

By utilizing the Hero - Basic section effectively, you can create a visually engaging and informative introduction to your pages, enhancing user experience and engagement.